<template>
  <div class="content">
     <div class="head" v-show="false">
        客户文件信息
     </div>
    <div class="file1" v-show="false">
       <div style="width: 100%;height: 100px">
         <canvas id="canvas" width='360' height='600'></canvas>
       </div>
    </div>
    <div class="head"  v-show="false">
      <!--<span>客户表单</span>-->
      <Button type="info" @click="getformdata()" style="background:rgba(58,152,255,1);width: 120px;">获取表单内容</Button>
      <!--<div v-if="formdata">-->

        <!--<Modal-->
          <!--v-model="formdata.ID"-->
          <!--title="客户提交表单"-->
          <!--content=""-->
          <!--ok-text="确定"-->
          <!--cancel-text = "关闭"-->
         <!--&gt;-->
          <!--<div v-show="formdata.name" class="form">客户名:{{formdata.name}}</div>-->
          <!--<div v-show="formdata.ID" class="form">身份证:{{formdata.ID}}</div>-->
          <!--<div v-show="formdata.age" class="form">年龄:{{formdata.age}}</div>-->
          <!--<div v-show="formdata.mobile" class="form">手机号:{{formdata.mobile}}</div>-->
          <!--<div v-show="formdata.address" class="form">住址:{{formdata.address}}</div>-->
        <!--</Modal>-->

      <!--</div>-->
    </div>

    <div class="head"  v-show="false">
      <span>通话记录</span>
      <Button type="info" @click="updatedata()">更新</Button>
    </div>
    <div class="file"  v-show="false">
      <div style="width: 100%;" class="item" v-for="item in recorddata">
          <span>{{getMyDate(item.createTime)}} </span>
          <span>{{item.msgFrom==1?'客户':'坐席'}}回复:</span>
          <span v-if="item.msgType == 'text'">{{item.text.content}}</span>
          <img :src="fileurl+item.image.mediaId" v-if="item.msgType == 'image'" class="image"></img>
          <Button type="info" v-if="item.msgType == 'file'" @click="gofile(item.file.mediaId)">{{item.file.title}}</Button>
      </div>
      <!--<a :href="fileurl+'10001/201908/10/9ef940c3b4994d19ae1ada9efc91ae7d.pdf'">pdf文件</a>-->
      <!--<Button @click="gotofile()">pdf</Button>-->
    </div>
    <div class="head">
      聊天窗口
    </div>
    <div style="width: 100%;height: 500px;z-index: 2">
      <i-m @sendtxt="sendtxt" :chatList="chatList"  ref="im"></i-m>
    </div>

  </div>
</template>

<script>
    import IM from "./IM";
    export default {
        name: "Right",
        components: {IM},
        props:['recorddata','fileurl','chatList','captureImage','formdata'],
      mounted(){

      },

      created(){
      },

        methods:{

          linkccim(url){
            this.$refs.im.initCCC(url);
          },

          sendmessage(value){
            this.$refs.im.sendMessage(true,value);
          },

          createroomandinvite(){
            //this.$parent.createroomandinvite();
            this.$emit('createroomandinvite');
          },



          /*发送消息*/
          sendtxt(value){
            console.log(value);
            this.$emit('sendtxt',value);
          },
          //
          // customerhangup(){
          //   this.$emit('customerhangup');
          // },


          /*发送文件*/
          sendfile(value){
            // this.$emit('sendfile',value);
          },
            updatedata(){
              this.$emit('getrecord');
            },

          /*获取客户提交的表单信息*/
          getformdata(){
            this.$emit('getformdata');
          },

          gotofile(){
           let url = this.fileurl+'10001/201908/10/9ef940c3b4994d19ae1ada9efc91ae7d.pdf'  ;
            window.open(url, '_blank');//'toolbar=yes, width=900, height=700'
          },

          gofile(mediaId){
            let url = this.fileurl + mediaId;
            window.open(url, '_blank');//'toolbar=yes, width=900, height=700'
          },

          getMyDate(str) {
              var oDate = new Date(str*1000),
                oYear = oDate.getFullYear(),
                oMonth = oDate.getMonth()+1,
                oDay = oDate.getDate(),
                oHour = oDate.getHours(),
                oMin = oDate.getMinutes(),
                oSen = oDate.getSeconds(),
                oTime = oYear +'-'+ this.addZero(oMonth) +'-'+ this.addZero(oDay) +' '+ this.addZero(oHour) +':'+
                  this.addZero(oMin) +':'+this.addZero(oSen);
              return oTime;
            },

            //补零操作
           addZero(num){
              if(parseInt(num) < 10){
                num = '0'+num;
              }
              return num;
            },
         }
    }
</script>

<style scoped>

  .content{
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
  }

  .head{
    background:rgba(247,248,249,1);
    color:rgba(51,51,51,1);;
    font-size: 15px;
    width: 100%;
    height: 50px;
    line-height: 50px;
  }

  .file{
    overflow: auto;
    height: 100px;
    width: 100%;
  }

  .canvas{
    width: 800px;
    height: 600px;
  }

  .file1{
    overflow: auto;
    height: 200px;
    width: 100%;
  }

  .image{
    width: 40px;
    height: 40px;
  }
  .item{
    border:1px solid royalblue;
  }

</style>
